<template>
  <div>
    <h1>{{ $store.state.num }}</h1>
    <h2>{{ getNum }}</h2>
    <h2>{{ $store.getters.firstName }}</h2>
    <hr />
    <h2>{{ firstName }}</h2>
    <button @click="add1">点我，我帮你求和{{ $store.state.sum }}</button>
    <button @click="($event) => jia(1)">奇数加1</button
    ><button @click="($event) => jia(2)">偶数加2</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      getNum(state) {
        return state.num + 4;
      },
    }),
    ...mapGetters(["firstName"]),
  },
  created() {
    console.log("我是数据哦", this.$store.getters.firstName);
  },

  methods: {
    add1() {
      // this.$store.state.sum += 1;
      this.$store.commit("changeSum", 1); //vuex方法修改值，进行数据加1   也可以进行数组传值
    },
    jia(index) {
      this.$store.dispatch("addNum", index);
    },
  },
};
</script>
<style lang="less" scoped>
</style>